/* 我们将在这里写 CSS */
body {
    margin: 0; /* 消除 body 的默认边距 */
    height: 100vh;
    display: grid;
    grid-template-rows: 56px 1fr;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff; /* 先给个白色背景 */
    border-bottom: 1px solid #ddd; /* 加个下边框，方便我们看到它 */
    padding: 0 16px;
}

.logo-container, .icons-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icons-container span {
    display: flex; /* 这能让 padding 生效并居中图标 */
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
}

.icons-container span:hover {
    background-color: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.search-container {
    /* 我们需要在这里让 input 和 button 紧挨着 */
    display: flex;
    flex-grow: 1; /* 让搜索框容器尽可能伸展，占据中间位置 */
    margin: 0 40px; /* 和左右的图标保持一些距离 */
    max-width: 600px; /* 设置一个最大宽度，避免在宽屏上太长 */
}

input[type="text"] {
    width: 100%; /* 让输入框填满它的容器 */
    border: 1px solid #ccc;
    border-right: none;
    padding: 8px 12px;
    font-size: 16px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* 针对 button 元素的样式 */
button {
    /* 在这里写 button 的样式 */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 0 16px; /* 给按钮一些内边距 */
    cursor: pointer; /* 鼠标悬停时显示小手图标 */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.main-container {
    display: grid;
    grid-template-columns: 240px 1fr;
}

.sidebar {
    background-color: #f0f0f0; /* 给个灰色背景 ताकि我们能看到它 */
}

.sidebar ul{
    list-style-type: none;
    padding-left: 0;
}

.sidebar li{
    display: flex;
    align-items: center;
    padding: 12px 24px;
}

.sidebar li:hover{
    background-color:#e0e0e0;
    cursor: pointer; /* 鼠标悬停时显示小手图标 */
    transition: background-color 0.2s ease;
}

.sidebar li span:first-child {
    margin-right: 24px; /* 给图标一个右边距 */
    /* 顺便让 emoji 图标大一点点 */
    font-size: 20px;
}

.sidebar .active{
    background-color:#ccc;
}

.sidebar span{
    margin-right: 16px;
}


.main-content {
    display: grid;
    /* auto-fit 会让网格尽可能多地容纳列，minmax(320px, 1fr) 表示每列最小320px，最大平分剩余空间 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px; /* 网格间距 */
    padding: 24px; /* 给整个内容区一点内边距 */
    overflow-y: auto; /* 如果内容超高，允许滚动 */
}

@media (max-width: 768px){
    .main-container {
        grid-template-columns: 1fr;
    }
    .main-content {
        grid-template-columns: 1fr;
    }

    .sidebar{
        display: none;
    }
}


.video-card{
    width: 320px;
    margin: 16px;
}

.thumbnail{
    width: 100%;
    border-radius: 12px;
    display: block;
}

.details{
    display: flex;
    gap: 16px;
}
.avatar{
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.text-info .title {
    font-weight: bold;
    color: #0f0f0f;
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 16px; /* 我们可以给标题一个明确的大小 */
}

/* 使用逗号, 同时选中这两个类 */
.text-info .channel-name,
.text-info .views {
    font-size: 14px;
    color: #606060;
    margin-top: 4px; /* 用小一点的 margin-top */
    margin-bottom: 4px; /* 替代默认的 p 标签边距 */
}